<template>
  <div id="app">
      <!--router-view显示渲染后路由映射的组件,可以调整放置的位置-->
      <!--<router-view></router-view>-->
      <!--router-link显示路由标签-->
      <!--<router-link to="/home">首页</router-link>-->
      <!--<router-link to="/about">关于</router-link>-->
      <!--router-view显示渲染后路由映射的组件,可以调整放置的位置-->
      <!--<router-link to="/home" tag="button" replace>首页</router-link>-->
      <!--<router-link to="/about" tag="button" replace>关于</router-link>-->
      <button @click="homeClick">首页</button>
      <button @click="aboutClick">关于</button>
      <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    homeClick(){
      this.$router.push('/home');
      // 第二种replace方法
      // this.$router.replace('/home');
      console.log("homeClick");
    },
    aboutClick(){
      this.$router.push('/about');
      console.log("aboutClick");
    }
  }
}
</script>
<!--
点击router-link的时候,选中的类为router-link-active,设置对应为红色

-->
<style>

.router-link-active{
  color:red;
}
.active{
  color:red;
}
</style>
